<!--  -->
<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="powerTable"
      border
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="
        (selection) => {
          chooseChange(selection);
        }
      "
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="权限编号" width="80"> </el-table-column>
      <el-table-column prop="pname" label="权限名称" width="120">
      </el-table-column>
      <el-table-column prop="pstate" label="权限状态" width="120">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.pstate"
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            @change="changeState(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="权限地址" width="300">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="powerEdit(scope.row)">修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="powerDeleteOne(scope.row)"
            >删除</el-button
          >
          <el-button size="mini" type="success" @click="powerShow(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row :gutter="20">
      <el-col :span="6" :offset="18"
        ><div class="grid-content bg-purple">
          <el-button
            type="primary"
            @click="(dialogVisible = true), (flag = 1), (powerForm = {})"
            icon="el-icon-plus"
            round
            >新增权限</el-button
          >
          <el-button
            type="danger"
            round
            width="130px"
            @click="powerDelChoose"
            icon="el-icon-delete-solid
"
            >删除选中</el-button
          >
        </div></el-col
      >
    </el-row>
    <el-dialog title="权限" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="powerForm"
        ref="empForm"
        label-width="70px"
        class="demo-empForm"
      >
        <el-form-item label="权限名称" prop="pname">
          <el-input v-model="powerForm.pname"></el-input>
        </el-form-item>
        <el-form-item label="权限地址" prop="url">
          <el-input v-model="powerForm.url"></el-input>
        </el-form-item>

        <el-form-item label="权限描述" prop="pdesc">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="powerForm.pdesc"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="flag == 1 ? addPower() : updatePower()"
          >确定</el-button
        >
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="权限详情" :visible.sync="powerDesc" width="30%">
      <el-form
        :model="powerForm"
        ref="empForm"
        label-width="70px"
        class="demo-empForm"
      >
        <el-form-item label="权限名称" prop="pname">
          <el-input v-model="powerForm.pname" readonly></el-input>
        </el-form-item>
        <el-form-item label="权限地址" prop="url">
          <el-input v-model="powerForm.url" readonly></el-input>
        </el-form-item>

        <el-form-item label="权限描述" prop="pdesc">
          <el-input
            readonly
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="powerForm.pdesc"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="powerDesc = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //权限详情的控制条件
      powerDesc: false,
      //全增权限框弹出条件
      flag: 0,
      dialogVisible: false,
      powerForm: {},
      powerTable: [],
      chooseIds: [],
    };
  },
  methods: {
    powerShow(thisRow) {
      this.http({
        url: "power/one/" + thisRow.id,
        method: "get",
      }).then(({ data }) => {
        if (data.code == 1) {
          this.powerForm = data.data;
          this.powerDesc = true;
        }
      });
    },
    powerEdit(thisRow) {
      this.flag = 0;
      this.http({
        url: "power/one/" + thisRow.id,
        method: "get",
      }).then(({ data }) => {
        if (data.code == 1) {
          this.powerForm = data.data;
          this.dialogVisible = true;
        }
      });
    },
    updatePower() {
      this.http({
        url: "power/update",
        method: "put",
        data: this.powerForm,
      }).then(({ data }) => {
        if (data.code == 1) {
          this.$message({
            message: data.msg,
            type: "success",
          });

          this.dialogVisible = false;
          this.getPowerList();
        }
      });
    },
    addPower() {
      this.http({
        url: "power/save",
        method: "post",
        data: this.powerForm,
      }).then(({ data }) => {
        if (data.code == 1) {
          this.$message({
            message: data.msg,
            type: "success",
          });
          this.dialogVisible = false;
          this.powerForm = {};
          this.getPowerList();
        }
      });
    },
    changeState(thisRow) {
      console.log(thisRow);
      this.http({
        url: "power/update/state/" + thisRow.id,
        method: "put",
      }).then(({ data }) => {
        if (data.code == 1) {
          this.getPowerList();
        }
      });
    },
    powerDeleteOne(thisRow) {
      this.chooseIds = [];
      this.chooseIds.push(thisRow.id);
      this.powerDelChoose();
      this.chooseIds = [];
    },
    chooseChange(selection) {
      this.chooseIds = [];
      for (const key in selection) {
        this.chooseIds.push(selection[key].id);
      }
    },
    powerDelChoose() {
      if (this.chooseIds.length == 0) {
        this.$message({
          message: "未勾选,请勾选后再试!",
          type: "warning",
        });
        return;
      }
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.http({
            url: "power/del",
            method: "delete",
            data: this.chooseIds,
          }).then(({ data }) => {
            if (data.code == 1) {
              this.$message({
                message: data.msg,
                type: "success",
              });
              this.getPowerList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getPowerList() {
      this.http({
        url: "power/list",
        method: "get",
      }).then(({ data }) => {
        if (data.code == 1) {
          this.powerTable = data.data;
        }
      });
    },
  },
  mounted() {
    this.getPowerList();
  },
};
</script>

<style>
</style>
